<template>
	<view class="member-item" @click="toMemberInfoPage(account)">
		<img class="member-avatar" :src="avatarUrl" alt="avatar" />
		<view class="member-info">
			<span class="member-title advanced" v-if="type === 2" style="text-shadow: none;">
				高级权限
			</span>
			<span class="member-title middle" v-else-if="type === 1" style="text-shadow: none;">
				中级权限
			</span>
			<span class="member-title primary" v-else style="text-shadow: none;">
				初级权限
			</span>
			<p class="member-name">{{ name }}</p>
		</view>
		<!-- <i class="fa fa-angle-right" style="font-size: 24px; line-height: 48px;"></i> -->
	</view>
</template>

<script>
	export default {
		name: "MemberCard",
		props: {
			account: {
				type: String,
				default: "asadd12135"
			},
			name: {
				type: String,
				default: "张三"
			},
			type: {
				type: Number,
				default: 0
			},
			avatarUrl: {
				type: String,
				default: "/static/logo_company.png"
			}
		},

		data() {
			return {

			};
		},

		methods: {
			toMemberInfoPage(account) {
				uni.navigateTo({
					url: `/pages/memberInfo/memberInfo?account=${account}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-item {
		display: flex;
		align-items: center;
		padding: 12px 20px;
		background-color: #fff;
		color: #333;
	}

	.member-avatar {
		display: block;
		width: 48px;
		height: 48px;
		border-radius: 24px;
	}

	.member-info {
		margin-left: 16px;
		display: flex;
		align-items: center;
	}

	.member-name {
		flex: 1;
		line-height: 48px;
		margin-left: 8px;
		font-size: 16px;
		font-weight: 500;
	}

	.member-title {
		width: 64px;
		height: 24px;
		border-radius: 8px;
		text-align: center;
		line-height: 24px;
		font-size: 12px;
	}

	.advanced {
		// background-color: #FEFA83;
		color: #e99542;
		border: 0.5px solid #e99542;
	}

	.middle {
		// background-color: #CCF783;
		color: #377F7F;
		border: 0.5px solid #377F7F;
	}

	.primary {
		border: #aaa solid 0.5px;
	}
</style>